<script>
import { MeasureLength, MeasureArea, MeasureAttrDark } from "@/utils/Measure";
let measureLengthIns = null;
let measureAreaIns = null;
import MAIN_STORE from '@/store/store.js'
export default {
  /**
   * 工具方法
   * 放大 缩小 初始化 旋转
  */
  name: "funciton-controller",
  components: {},
  data() {
    return {
      // 是否正在测量
      isMeasuring: false,
      // length area height
      measuringType: '',
      rotate: 0,
      isMeasureLength: false,
      isMeasureArea: false,
      showLegend: true,
      isMeasureLocation: false
    }
  },
  computed: {
    compassStyle() {
      return {
        transform: 'rotate(' + this.rotate + 'deg)'
      }
    },
    slideMode() {
      return this.$store.state.slideMode
    }
  },
  watch: {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  methods: {
    homeClick() {
      this.$store.commit('LOCATION_ORIGIN_VIEW');
    },
    zoomOut() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      if (!mapIns) { return }
      const min = mapIns.getView().getMinZoom();
      const currentZoom = mapIns.getView().getZoom();
      const n = currentZoom - 1 < min ? min : currentZoom - 1;
      mapIns.getView().animate({
        zoom: n,
        duration: 300,
      });
    },
    zoomIn() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      if (!mapIns) { return }
      const max = mapIns.getView().getMaxZoom();
      const currentZoom = mapIns.getView().getZoom();
      const n = currentZoom + 1 > max ? max : currentZoom + 1;
      mapIns.getView().animate({
        zoom: n,
        duration: 300,
      });
    },
    leftClick() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      let view = mapIns.getView();
      let center = view.getCenter();
      let rotation = view.getRotation();
      rotation = rotation - Math.PI / 2;
      this.rotate -= 90;
      view.animate({
        center,
        rotation
      })
    },
    rightClick() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      let view = mapIns.getView();
      let center = view.getCenter();
      let rotation = view.getRotation();
      rotation = rotation + Math.PI / 2;
      this.rotate += 90;
      view.animate({
        center,
        rotation
      })
    },
    centerClick() {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS
      let view = mapIns.getView();
      let center = view.getCenter();
      this.rotate = 0;
      view.animate({
        center,
        rotation: 0
      })
    },
    doMeasureLength() {
      if(measureAreaIns) {
        measureAreaIns && measureAreaIns.destroy();
        measureAreaIns = null;
        this.isMeasureArea = false;
      }

      if(measureLengthIns) {
        measureLengthIns && measureLengthIns.destroy();
        measureLengthIns = null;
        this.isMeasureLength = false;
      } else {
        this.isMeasureLength = true;
        measureLengthIns = new MeasureLength({
          map: MAIN_STORE.GLOBAL_MAP_INS,
        });
        measureLengthIns.handleClickCalcDistance();
      }
    },
    doMeasureArea() {
      if(measureLengthIns) {
        measureLengthIns && measureLengthIns.destroy();
        measureLengthIns = null;
        this.isMeasureLength = false;
      }

      if(measureAreaIns) {
        measureAreaIns && measureAreaIns.destroy();
        measureAreaIns = null;
        this.isMeasureArea = false;
      } else {
        this.isMeasureArea = true;
        measureAreaIns = new MeasureArea({
          map: MAIN_STORE.GLOBAL_MAP_INS,
        });
        measureAreaIns.handleClickCalcArea();
      }
    },
    toggleLegend() {
      this.showLegend = !this.showLegend
      this.$MITT_BUS.emit('send-legend-visi', {
        tag: this.showLegend
      })
    },
    pushPull() {
      this.$store.commit('SET_SLIDE_MODE', {
        mode: this.slideMode? '': 'close'
      })
    },
    locationSearch() {
      let ins = MeasureAttrDark.getIns();
      if (!ins) {
        ins = MeasureAttrDark.create({
          map: MAIN_STORE.GLOBAL_MAP_INS,
          overlayLimit: 3,
          whenCloseAll: () => {
            this.isMeasureLocation = false;
            ins.destroy();
          }
        });
        this.isMeasureLocation = true;
      } else {
        ins.destroy();
        this.isMeasureLocation = false;
      }
    }
  },
};
</script>

<template>
  <div class="all-function-controller" :class="[
    ['Search', 'Decision'].indexOf($route.name) !== -1 ? '' : '',
    slideMode? 'stick-side': ''
  ]">
    <!-- 指北针 -->
    <div class="compass-wrapper">
      <!-- 逆时针 -->
      <div class="nishizhen hover-pointer" @click="leftClick"></div>
      <!-- 时针 -->
      <div class="compass-inner hover-pointer" @click="centerClick" :style="compassStyle"></div>
      <!-- 顺时针 -->
      <div class="shunshizhen hover-pointer" @click="rightClick"></div>
    </div>
    <!-- 外部 -->
    <div class="measure-out">
      <div class="item hover" :class="[
        slideMode? 'push': 'pull'
      ]" @click="pushPull()" title="面板显隐控制"></div>
      <div class="item zoom-in hover" @click="zoomIn()" title="地图放大"></div>
      <div class="item zoom-out hover" @click="zoomOut()" title="地图缩小"></div>
      <div class="item home hover" title="初始视角" @click="homeClick()"></div>
      <div class="item location hover" title="位置查询"
        :class="[
          isMeasureLocation? 'active': ''
        ]"
      @click="locationSearch()"></div>
      <div class="item length hover" title="测量距离" :class="[
          isMeasureLength? 'active': ''
      ]" @click="doMeasureLength()"></div>
      <div class="item area hover" title="测量面积" :class="[
          isMeasureArea? 'active': ''
      ]" @click="doMeasureArea()"></div>
      <div class="item legend hover" title="图例显隐控制" @click="toggleLegend()"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.all-function-controller {
  position: fixed;
  bottom: 10rem;
  right: 46rem;
  pointer-events: all;
  transform: scale(.5);
  transform-origin: right bottom;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .3s;

  &.show {
    display: initial;
  }
  &.stick-side {
    right: 1.5rem;
  }

  &>.compass-wrapper {
    margin-bottom: 2rem;
    width: 10rem;
    height: 10rem;
    transform: scale(1);
    background: url("@/components/images/earth-navi-control-pc4-2x.png") 0% 0% / 50rem no-repeat;

    &>.nishizhen {
      position: absolute;
      left: 0.2rem;
      width: 2.8rem;
      height: 100%;
      background: url("@/components/images/earth-navi-control-pc4-2x.png") -13.9rem 0 / 50rem no-repeat;
      z-index: 2;

      &:hover {
        background: url("@/components/images/earth-navi-control-pc4-2x.png") -16.5rem 0 / 50rem no-repeat;
      }
    }

    &>.compass-inner {
      position: absolute;
      left: 3.4rem;
      width: 2.8rem;
      height: 100%;
      background: url("@/components/images/earth-navi-control-pc4-2x.png") -10.4rem 0 / 50rem no-repeat;
      z-index: 1;
      transition: all 1s;
    }

    &>.shunshizhen {
      position: absolute;
      left: 7.2rem;
      width: 2.8rem;
      height: 100%;
      background: url("@/components/images/earth-navi-control-pc4-2x.png") -13.5rem 0 / 50rem no-repeat;
      z-index: 2;
      transform: scaleX(-1);

      &:hover {
        background: url("@/components/images/earth-navi-control-pc4-2x.png") -16.1rem 0 / 50rem no-repeat;
      }
    }
  }

  &>.measure-out {
    &>.item {
      width: 6rem;
      height: 6rem;
      margin-bottom: 1rem;
      background-repeat: no-repeat;
      background-size: 60% 60%;
      cursor: pointer;
      transition: all .7s;
      background-color: rgba(100, 100, 100, 0.6);
      border-radius: 1rem;
      background-position: center center;
      border: 1px solid transparent;
      &.active {
        border: 1px solid rgba(10, 255, 30, 0.8);
        background-color: rgba(10, 255, 30, 0.3);
      }

      &.push {
        background-image: url("./images/icon-推.svg");
      }
      &.pull {
        background-image: url("./images/icon-拉.svg");
      }

      // zoom 变小
      &.zoom-out {
        background-image: url("./images/icon-缩小.svg");
      }

      //  zoom 变大
      &.zoom-in {
        background-image: url("./images/icon-搜索放大.svg");
      }

      // 回到初始的视角
      &.home {
        background-image: url("./images/icon-初始化视角.svg");
      }
      // 当前经纬度查询
      &.location {
        background-image: url("./images/icon-定位.svg");
      }

      &.length {
        background-image: url("./images/icon-测距.svg");
      }

      &.area {
        background-image: url("./images/icon-测面积.svg");
      }

      &.legend {
        background-image: url("./images/icon-图例.svg");
      }

      &.hover:hover {
        background-size: 70% 70%;
      }
    }
  }
}
</style>